<template>
  <div class="storeOrder" @click="vinListShow()">
    <!-- ========修改弹窗======-->
    <!--、、库管订单：确认取车-->
    <div class="item" v-if="+updateMsg.code === 9 || +updateMsg.code === 13">
      <el-dialog
        title="确认取车"
        width="45%"
        class="fns-el-dialog"
        :close-on-click-modal="false"
        :visible.sync="updateMsg.flag === 'confirm'"
        :before-close="handleClose">
        <!--// body-->
        <div :span="24">
          <el-form  label-width="110px" style="margin-left:6px;">
            <el-row>
              <el-col :span="11">
                <el-form-item label="订单编号：">
                  <el-input v-model="form1.orderCode" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="11" :offset="1">
                <el-form-item label="经手销售：">
                  <el-input v-model="form1.saleName" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="经纪人：">
                  <el-input v-model="form1.brokerName" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11" :offset="1">
                <el-form-item label="验车时间：">
                  <el-input v-model="form1.carValidatingTime" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="验车人姓名：">
                  <el-input v-model="form1.carValidatingPersonName" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="11" :offset="1">
                <el-form-item label="验车人电话：">
                  <el-input v-model="form1.carValidatingPersonPhone" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="验车人身份证：">
                  <el-input v-model="form1.idCard" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="11" :offset="1">
                <el-form-item label="身份证正面：">
                  <a href=" imgUrl + form1.idCardFrontUrl " target="_blank">{{ form1.idCardFrontUrl || '' }}</a>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>

        <!--// 底部-->
        <span slot="footer" class="dialog-footer">
          <el-button @click="updateMsg.code = -1">取 消</el-button>
          <el-button type="primary" @click="submitForm">提 交</el-button>
        </span>
      </el-dialog>
    </div>

    <!--、、信息员订单：更换车辆-->
    <div class="item" v-if="+updateMsg.code === 9 || +updateMsg.code === 13">
      <el-dialog
        title="更换车辆"
        width="60%"
        class="fns-el-dialog"
        :close-on-click-modal="false"
        :visible.sync="updateMsg.flag === 'out'"
        :before-close="handleClose">
        <!--// 公司客户-->
        <div :span="24">
          <el-form  label-width="110px" style="margin-left:6px;">
            <el-row>
              <el-col :span="11">
                <el-form-item label="订单编号：">
                  <el-input v-model="form2.orderCode" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="11" :offset="1">
                <el-form-item label="经手销售：" >
                  <el-input v-model="form2.saleName" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>

           <el-row>
             <el-col :span="11">
               <el-form-item label="经纪人：">
                 <el-input v-model="form2.brokerName" placeholder="" disabled></el-input>
               </el-form-item>
             </el-col>
           </el-row>

           <el-row>
             <el-col :span="24">
               <el-table
                 v-loading="loading"
                 :data="form2.tableData"
                 border
                 style="width: 100%">
                 <el-table-column
                   type="index"
                   align="center"
                   width="80"
                   label="序号">
                 </el-table-column>
                 <el-table-column
                   prop="brandName"
                   label="汽车品牌"
                   align="center">
                 </el-table-column>
                 <el-table-column
                   prop="modelName"
                   label="型号规格"
                   align="center ">
                 </el-table-column>
                 <el-table-column
                   prop="extcolor"
                   label="外观颜色"
                   align="center ">
                 </el-table-column>
                 <el-table-column
                   prop="nercolor"
                   label="内饰颜色"
                   align="center ">
                 </el-table-column>
                 <el-table-column
                   prop="vinCode"
                   label="VIN码"
                   align="center ">
                 </el-table-column>
                 <el-table-column
                   label="操作"
                   align="center"
                   width="120">
                   <template slot-scope="scope">
                     <el-tooltip content="更换车辆" placement="top">
                       <a @click="openVIN(scope.row, scope.$index)" style="padding-left: 5px;">
                         <i class="el-icon-edit-outline"></i>
                       </a>
                     </el-tooltip>
                   </template>
                 </el-table-column>
               </el-table>

               <!-- ========页码======-->
              <div style="padding-bottom: 20px">
                <pages v-on:_pageChange="_pageChange" :total="total"></pages>
              </div>
             </el-col>
           </el-row>

          </el-form>
        </div>

        <!--&lt;!&ndash;// 底部&ndash;&gt;-->
        <!--<span slot="footer" class="dialog-footer">-->
          <!--<el-button @click="updateMsg.code = -1">取 消 </el-button>-->
          <!--<el-button type="primary" @click="submitForm">提 交</el-button>-->
        <!--</span>-->
      </el-dialog>
    </div>

    <!--、、修改VIN码-->
      <el-dialog
        title="修改"
        class="inDialog"
        :close-on-click-modal="false"
        :visible.sync="outVisible">
        <div :span="24">
          <el-form ref="vinDataSave" :model="vinData" :rules="rules" label-width="110px" style="margin-left:6px;">
            <el-col :span="22">
              <el-form-item label="VIN码：" prop="vin" >
                <div class="vinSeach"  @click="vinListShowStop(this)">
                  <el-input v-model="vinData.vin" @input="vinChange()" @focus='vinFocus()' placeholder=""></el-input>
                  <div class="list" v-if="vinVisible">
                    <div class="vinMsg" v-if="vinList.length > 0" >
                        <a class="item" v-for="item in vinList" :key="item" @click="vinHandle(item)">{{ item }}</a>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-form>
        </div>
        <!--// 底部-->
        <span slot="footer" class="dialog-footer">
          <el-button @click="outVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitVin">提 交</el-button>
        </span>
      </el-dialog>

  </div>
</template>

<script>
  import { Message } from 'element-ui'
  import * as api from '@/api/order'
  import { mapState } from 'vuex'
  import pages from '@/components/page/page'

  export default {
    props: {
      updateMsg: {
        type: Object
      }
    },
    data() {
      return {
        total: 0,
        loading: false,
        disabled: '',
        modelTitle: '修改',
        dialogVisible: true,
        outVisible: false,
        vinVisible: false,
        activeName: 'second',
        inDialog: {
          value: ''
        },
        form1: {
          brokerName: ''
        },
        formData1: {
          orderId: ''
        },
        form2: {
          brokerName: '',
          orderReplacementVehicleInfos: []
        },
        formData2: {
          orderId: ''
        },
        page: {
          index: 1,
          size: 10
        },
        vinData: { // 查询vin
          brandId: '',
          modelId: '',
          extcolor: '',
          nercolor: '',
          id: '',
          vin: ''
        },
        vinDataSave: { // 保存vin
          vinCode: '',
          id: ''
        },
        formModel: {
          id: '',
          salesBrand: [],
          saleArea: [],
          account: '',
          psd: '',
          confirmPsd: '',
          placeArea: [],
          enterpriseType: [],
          brokerName: '',
          saleMode: [],
          companyAddress: '',
          contactName: '',
          contactPhone: '',
          mailAddress: '',
          saleUserId: '',
          remarks: '',
          status: ''
        },
        vinList: [],
        value: '',
        rules: {
          account: [
            { required: true, message: '账号不能为空', trigger: 'blur' }
          ],
          brokerName: [
            { required: true, message: '经纪人名称不能为空', trigger: 'blur' }
          ],
          psd: [
            { required: true, message: '密码不能为空', trigger: 'blur' }
          ],
          confirmPsd: [
            { required: true, message: '密码不能为空', trigger: 'blur' }
          ],
          placeArea: [
            { required: true, message: '所在省份不能为空', trigger: 'change' }
          ],
          enterpriseType: [
            { required: true, message: '企业性质不能为空', trigger: 'change' }
          ],
          companyAddress: [
            { required: true, message: '公司地址不能为空', trigger: 'blur' }
          ],
          salesBrand: [
            { required: true, message: '销售品牌不能为空', trigger: 'change' }
          ],
          saleMode: [
            { required: true, message: '销售方式不能为空', trigger: 'change' }
          ],
          // saleArea: [
          //   { required: true, message: '销售省份不能为空', trigger: 'change' }
          // ],
          contactName: [
            { required: true, message: '联系人不能为空', trigger: 'blur' }
          ],
          contactPhone: [
            { required: true, message: '经手销售不能为空', trigger: 'blur' }
          ],
          saleUserId: [
            { required: true, message: '联系电话不能为空', trigger: 'blur' }
          ],
          mailAddress: [
            { required: true, message: '邮寄地址不能为空', trigger: 'blur' }
          ]
        },
        form4: {
          sales: 3
        }
      }
    },
    watch: {
      dialogVisible() {
        if (this.$refs.formModel) {
          this.$refs.formModel.clearValidate()
        }
      },
      outVisible() {
        if (!this.outVisible) {
          this.vinVisible = false
        }
      }
    },
    components: {
      pages
    },
    created() {
      this.getlist()
    },
    computed: {
      ...mapState({
        imgUrl: state => state.userInfo.url
      })
    },
    methods: {
      // 分页
      _pageChange(val, flag) {
        // this.clearArrVal(this.list)
        var arr = []
        if (flag === 'size') {
          this.page.index = val
          this.getlist()
        } else {
          arr.push(val)
          this.page.index = 1
          this.page.size = arr[1]
          this.getlist()
        }
      },
      getlist() {
        var orderId = { orderId: +this.updateMsg.id }
        if (this.updateMsg.flag === 'confirm') {
          // 获取--确认取车
          api.confirmModify(orderId).then((res) => {
            if (+res.code === 0) {
              this.form1 = res.data
            }
          })
        } else if (this.updateMsg.flag === 'out') {
          // 获取--更换车辆
          var data = {
            index: this.page.index,
            size: this.page.size,
            orderId: +this.updateMsg.id
          }
          api.replacementModify(data).then((res) => {
            if (+res.code === 0) {
              this.form2 = res.data
              this.form2.tableData = res.data.orderReplacementVehicleInfos.rows
              this.total = +res.data.orderReplacementVehicleInfos.total
            }
          })
        }
      },
      // 保存--确认取车
      confirmSave() {
        this.formData1.orderId = +this.updateMsg.id
        api.confirmSave(this.formData1).then((res) => {
          if (+res.code === 0) {
            this.updateMsg.code = false
            this.$emit('queryList')
          }
        }).catch(err => {
          if (+err.code === 1020) {
            Message({
              message: '该订单状态已改变，请关闭对话框并刷新订单列表',
              type: 'warning',
              duration: 2000
            })
          }
        })
      },
      submitForm() {
        if (this.updateMsg.flag === 'confirm') {
          this.confirmSave()
        }
      },
      submitVin() {
        this.vinDataSave.vinCode = this.vinData.vin
        this.vinDataSave.orderId = +this.updateMsg.id
        this.$refs['vinDataSave'].validate((valid) => {
          if (valid) {
            api.vinSave(this.vinDataSave).then((res) => {
              if (+res.code === 0) {
                this.outVisible = false
                this.getlist()
              }
            })
          }
        })
      },
      openVIN(row) {
        this.vinData.brandId = row.brandId
        this.vinData.modelId = row.modelId
        this.vinData.extcolor = row.extcolor
        this.vinData.nercolor = row.nercolor
        this.vinData.id = row.id
        this.vinData.vin = row.vinCode
        this.outVisible = true
        // save
        this.vinDataSave.id = row.id
      },
      // Vin 值  发生改变
      vinChange() {
        var arr = this.vinData.vin.split('')
        if (arr.length > 3) {
          api.vinList(this.vinData).then((res) => {
            if (+res.code === 0) {
              this.vinList = res.data
              if (res.data.length > 0) {
                this.vinVisible = true
              } else {
                this.vinVisible = false
              }
            }
          })
        } else {
          this.vinVisible = false
        }
      },
      // vin 获取去焦点
      vinFocus() {
        var arr = this.vinData.vin.split('')
        if (arr.length > 3) {
          api.vinList(this.vinData).then((res) => {
            if (+res.code === 0) {
              this.vinList = res.data
              if (res.data.length > 0) {
                this.vinVisible = true
              } else {
                this.vinVisible = false
              }
            }
          })
        } else {
          this.vinVisible = false
        }
      },
      // 相应vin列表  事件
      vinHandle(val) {
        this.vinData.vin = val
        this.vinDataSave.vinCode = val
        this.vinVisible = false
      },
      vinListShow() {
        this.vinVisible = false
      },
      // 阻止事件传递
      vinListShowStop(evt) {
        var e = evt ? evt : window.event
        if (window.event) {
          e.cancelBubble = true
        } else {
          e.stopPropagation()
        }
      },
      // 响应关闭事件
      handleClose(done) {
        this.updateMsg.code = -1
      }
    }
  }
</script>
<style lang="scss">
  .storeOrder {
    position: relative;
    padding: 20px;
    .itemNum {
      .el-form-item__label {
        line-height: 18px;
      }
    }
    .el-dialog {
      width: 500px;
      .vinSeach {
        position: relative;
        .item {
          display: block;
          padding-left: 10px;
          line-height: 30px;
        }
        .item:hover {
          background: #4aa6fd;
          opacity: 0.6;
          color: #f5f5f5;
        }
      }
      .list {
        width: 100%;
        min-height: 60px;
        max-height: 280px;
        overflow-y: auto;
        border:1px solid #ebebeb;
        border-radius: 4px;
        position: absolute;
        left: 0;
        top: 40px;
        z-index: 1000;
        background: #f5f5f5;
      }
    }
    .item {
      .el-dialog {
        min-width: 800px;
        .el-form-item__label {
          width: 120px!important;
        }
        .el-form-item__content {
          margin-left: 120px!important;
        }
        .main {
          max-height: 600px;
          overflow-y: auto;
        }
        .itemVIN {
          .el-form-item__content {
            margin-top: 8px;
          }
          .el-col-10 {
            line-height: 20px;
          }
        }
      }
    }
    .el-table {
      .el-table__body-wrapper {
        height: 100%;
        overflow-x: inherit;
      }
    }
    .el-tabs__nav {
      margin-left: 30px;
    }
    .modalCheckBox {
      .el-checkbox-group {
        line-height: 18px;
        margin-left: 20px;
        margin-top: -5px;
        .el-checkbox {
          .el-checkbox__label {
            font-size: 12px;
            color: #666;
          }
        }
      }
      .el-checkbox {
        margin-right: 20px;
      }
      .el-checkbox + .el-checkbox {
        margin-left: 0;
      }
    }
  }
</style>
